<template>
  <!-- 消防信息 -->
  <div>
    <public-modal
      width="900px"
      :footer="false"
      title="消防信息"
      modalStyle="detailModal"
      :publicVisible="publicVisible"
      cancelContext="拒绝"
      confirmContext="通过"
      @cancel="cancel"
    >
      <div slot="content">
        <!-- 安全通道 -->
        <div class="base-info-wrap" v-if="secureChannelInfo.onSecureChannel !== null">
          <div class="common-title">
            <div class="icon"></div>
            <div class="content">安全通道</div>
          </div>

          <div class="content-wrapper base-content-wrapper">
            <div class="flex">
              <div class="info-wrap f1">
                <div class="label common-lable">有无</div>
                <div class="value common-value">
                  {{ secureChannelInfo.onSecureChannel == 1 ? '有' : '无' || '暂无' }}
                </div>
              </div>
              <div class="info-wrap f1" v-if="secureChannelInfo.onSecureChannel == 1">
                <div class="label common-lable">数量</div>
                <div class="value common-value">{{ secureChannelInfo.secureChannelCount }}</div>
              </div>
              <div class="info-wrap f1" v-if="secureChannelInfo.onSecureChannel == 1">
                <div class="label common-lable">照片</div>
                <div class="value common-value click-color cursor" @click="werImg('secureChannelImgList')">查看</div>
                <ul id="secureChannelImgList" style="display: none">
                  <li v-for="(item, index) in secureChannelImgList" :key="index">
                    <img :src="imgPrefix + item" :data-original="imgPrefix + item" />
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>

        <!-- 应急照明灯 -->
        <div class="base-info-wrap" v-if="floodlightInfo.onFloodlight !== null">
          <div class="common-title">
            <div class="icon"></div>
            <div class="content">应急照明灯</div>
          </div>

          <div class="content-wrapper base-content-wrapper">
            <div class="flex">
              <div class="info-wrap f1">
                <div class="label common-lable">有无</div>
                <div class="value common-value">
                  {{ floodlightInfo.onFloodlight == 1 ? '有' : '无' || '暂无' }}
                </div>
              </div>
              <div class="info-wrap f1" v-if="floodlightInfo.onFloodlight == 1">
                <div class="label common-lable">数量</div>
                <div class="value common-value">{{ floodlightInfo.floodlightCount }}</div>
              </div>
              <div class="info-wrap f1" v-if="floodlightInfo.onFloodlight == 1">
                <div class="label common-lable">照片</div>
                <div class="value common-value click-color cursor" @click="werImg('floodlightImgList')">查看</div>
                <ul id="floodlightImgList" style="display: none">
                  <li v-for="(item, index) in floodlightImgList" :key="index">
                    <img :src="imgPrefix + item" :data-original="imgPrefix + item" />
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>

        <!-- 消防栓 -->
        <div class="base-info-wrap" v-if="fireHydrantInfo.onFireHydrant !== null">
          <div class="common-title">
            <div class="icon"></div>
            <div class="content">消防栓</div>
          </div>

          <div class="content-wrapper base-content-wrapper">
            <div class="flex">
              <div class="info-wrap f1">
                <div class="label common-lable">有无</div>
                <div class="value common-value">{{ fireHydrantInfo.onFireHydrant == 1 ? '有' : '无' || '暂无' }}</div>
              </div>
              <div class="info-wrap f1" v-if="fireHydrantInfo.onFireHydrant == 1">
                <div class="label common-lable">数量</div>
                <div class="value common-value">{{ fireHydrantInfo.fireHydrantCount }}</div>
              </div>
              <div class="info-wrap f1" v-if="fireHydrantInfo.onFireHydrant == 1">
                <div class="label common-lable">照片</div>
                <div class="value common-value click-color cursor" @click="werImg('fireHydrantCount')">查看</div>
                <ul id="fireHydrantCount" style="display: none">
                  <li v-for="(item, index) in fireHydrantImgList" :key="index">
                    <img :src="imgPrefix + item" :data-original="imgPrefix + item" />
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>

        <!-- 应急预案 -->
        <div class="base-info-wrap" v-if="emergencyPlanInfo.onEmergencyPlan !== null">
          <div class="common-title">
            <div class="icon"></div>
            <div class="content">应急预案</div>
          </div>

          <div class="content-wrapper base-content-wrapper">
            <div class="flex">
              <div class="info-wrap f2">
                <div class="label common-lable">有无</div>
                <div class="value common-value">
                  {{ emergencyPlanInfo.onEmergencyPlan == 1 ? '有' : '无' || '暂无' }}
                </div>
              </div>
              <div class="info-wrap f1" v-if="emergencyPlanInfo.onEmergencyPlan == 1">
                <div class="label common-lable">照片</div>
                <div class="value common-value click-color cursor" @click="werImg('emergencyPlanImgList')">查看</div>
                <ul id="emergencyPlanImgList" style="display: none">
                  <li v-for="(item, index) in emergencyPlanImgList" :key="index">
                    <img :src="imgPrefix + item" :data-original="imgPrefix + item" />
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>

        <!-- 消防器材 -->
        <div class="base-info-wrap" v-if="fireToolInfo.onFireTool !== null">
          <div class="common-title">
            <div class="icon"></div>
            <div class="content">消防器材</div>
          </div>

          <div class="content-wrapper base-content-wrapper">
            <div class="flex">
              <div class="info-wrap f1">
                <div class="label common-lable">有无</div>
                <div class="value common-value">
                  {{ fireToolInfo.onFireTool == 1 ? '有' : '无' || '暂无' }}
                </div>
              </div>
            </div>

            <div class="equipment-wrap" v-for="(item, index) in fireToolInfo.pathList" :key="index">
              <div class="flex">
                <div class="info-wrap f1">
                  <div class="label common-lable">器材类型{{ index + 1 }}</div>
                  <div class="value common-value">{{ getDictType(publicDeviceType, item.deviceType) }}</div>
                </div>
                <div class="info-wrap f1">
                  <div class="label common-lable">器材编号</div>
                  <div class="value common-value">{{ item.deviceNo || '暂无' }}</div>
                </div>
                <div class="info-wrap f1">
                  <div class="label common-lable">照片</div>
                  <div class="value common-value click-color cursor" @click="werImg2(item.deviceImage)">查看</div>
                  <img
                    style="display: none"
                    :id="item.deviceImage"
                    :src="imgPrefix + item.deviceImage"
                    :data-original="imgPrefix + item.deviceImage"
                  />
                </div>
              </div>
              <div class="flex">
                <div class="info-wrap f1">
                  <div class="label common-lable">器材数量</div>
                  <div class="value common-value">{{ item.deviceCount || '暂无' }}</div>
                </div>

                <div class="info-wrap f2">
                  <div class="label common-lable">过期时间</div>
                  <div class="value common-value">
                    {{ item.expirationTime ? item.expirationTime.split(' ')[0] : '暂无' }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div slot="footer"></div>
    </public-modal>
  </div>
</template>
<script>
import Viewer from 'viewerjs'
import 'viewerjs/dist/viewer.css'
import publicModal from '@/components/publicModal'
import { comMethods } from '@/mixins/comMethods'
import { getAction } from '@/api/manage'
import { findEnableDictItemsbyCode } from '@/api/api'
export default {
  name: 'detailModal',
  components: { publicModal },
  mixins: [comMethods],
  data() {
    return {
      imgPrefix: '',
      publicVisible: false,

      secureChannelInfo: {}, //	安全通道信息
      secureChannelImgList: [],
      floodlightInfo: {}, //	应急照明灯信息
      floodlightImgList: [],
      fireHydrantInfo: {}, //	消防栓信息
      fireHydrantImgList: [],
      emergencyPlanInfo: {}, //	应急预案信息
      emergencyPlanImgList: [],
      fireToolInfo: {}, //	消防器材信息
      securityDoorInfo: {}, //	防盗门信息
      securityWindowInfo: {}, //	防盗窗信息
      protectiveFenceInfo: {}, //	防护栏信息
      safeInfo: {}, //	保险柜信息
      securitySystemInfo: {}, //	安全制度信息
      monitorInfo: {}, //	监控信息
      reportInfo: {}, //	自动报警设备信息
      airDefenseInfo: {}, //	人防信息

      bizId: '',

      publicDeviceType: [],
    }
  },

  methods: {
    async getDict() {
      const dictCodes = ['public_device_type']
      const dictResults = await Promise.all(dictCodes.map((code) => findEnableDictItemsbyCode({ code })))
      this.publicDeviceType = dictResults[0].result
    },

    getDictType(list, type) {
      let res = list.find((item) => item.value == type)
      if (res && res.title) {
        return res.title
      } else {
        return '暂无'
      }
    },

    show(records) {
      this.companyId = records.companyId
      this.getPublicSecurityDetail()
      this.getDict()
      this.publicVisible = true
    },

    async getPublicSecurityDetail() {
      let {
        result: {
          secureChannelInfo,
          floodlightInfo,
          fireHydrantInfo,
          emergencyPlanInfo,
          fireToolInfo,
          securityDoorInfo,
          securityWindowInfo,
          protectiveFenceInfo,
          safeInfo,
          securitySystemInfo,
          monitorInfo,
          reportInfo,
          airDefenseInfo,
        },
      } = await getAction('/industry/public_security/detail', { companyId: this.companyId })

      this.bizId = secureChannelInfo.id
      this.secureChannelInfo = secureChannelInfo
      this.floodlightInfo = floodlightInfo
      this.fireHydrantInfo = fireHydrantInfo
      this.emergencyPlanInfo = emergencyPlanInfo
      this.fireToolInfo = fireToolInfo
      this.securityDoorInfo = securityDoorInfo
      this.securityWindowInfo = securityWindowInfo
      this.protectiveFenceInfo = protectiveFenceInfo
      this.safeInfo = safeInfo
      this.securitySystemInfo = securitySystemInfo
      this.monitorInfo = monitorInfo
      this.reportInfo = reportInfo
      this.airDefenseInfo = airDefenseInfo

      this.getCompanyPhoto()
    },

    async getCompanyPhoto() {
      let { result: secureChannelImgList } = await getAction('/sys/images_path/list', { bizId: this.bizId, bizType: 6 })
      secureChannelImgList.forEach((item) => {
        this.secureChannelImgList.push(item.path)
      })
      let { result: floodlightImgList } = await getAction('/sys/images_path/list', { bizId: this.bizId, bizType: 7 })
      floodlightImgList.forEach((item) => {
        this.floodlightImgList.push(item.path)
      })
      let { result: fireHydrantImgList } = await getAction('/sys/images_path/list', { bizId: this.bizId, bizType: 8 })
      fireHydrantImgList.forEach((item) => {
        this.fireHydrantImgList.push(item.path)
      })
      let { result: emergencyPlanImgList } = await getAction('/sys/images_path/list', { bizId: this.bizId, bizType: 9 })
      emergencyPlanImgList.forEach((item) => {
        this.emergencyPlanImgList.push(item.path)
      })
    },

    cancel(target) {
      this.secureChannelImgList = []
      this.floodlightImgList = []
      this.fireHydrantImgList = []
      this.emergencyPlanImgList = []
      this.publicVisible = false
    },

    werImg2(id) {
      const ViewerDom = document.getElementById(id)
      const viewer = new Viewer(ViewerDom, {
        toolbar: false,
        button: false,
        navbar: false,
        title: false,
        url: 'data-original',
        hide: function () {
          viewer.destroy()
        },
      })
      viewer.show()
    },

    werImg(id) {
      const ViewerDom = document.getElementById(id)
      const viewer = new Viewer(ViewerDom, {
        toolbar: true,
        button: true,
        navbar: true,
        title: false,
        url: 'data-original',
        hide: function () {
          viewer.destroy()
        },
      })
      viewer.show()
    },
  },
}
</script>
<style scoped lang="less">
/deep/ .modalCotent {
  padding: 20px 40px;
  border-radius: 0 0 4px 4px;
}

img {
  display: none;
}

.base-content-wrapper {
  .common-lable {
    width: 120px !important;
  }
  .common-value {
    width: auto !important;
  }
}
</style>
